<template>
  <TopNav title="实时沟通与指导"/>
  <div class="real-time-communication-page">

    <!-- 聊天消息区域 -->
    <div class="chat-message-section">
      <div
          v-for="(message, index) in chatMessages"
          :key="index"
          :class="{ 'doctor-message': message.sender === 'doctor','patient-message': message.sender === 'patient' }"
      >
        <div class="message-header">
          <span class="sender">{{ message.sender }}</span>
          <span class="time">{{ message.time }}</span>
        </div>
        <div class="message-content">
          <img
              v-if="message.type === 'image'"
              :src="message.content"
              class="message-image"
              @click="previewImage(message.content)"
          />
          <span v-else>{{ message.content }}</span>
        </div>
      </div>
    </div>

    <!-- 消息输入区域 -->
    <div class="message-input-section">
      <el-input
          v-model="newMessage"
          placeholder="输入消息"
          @keyup.enter="sendMessage"
      ></el-input>
      <el-button
          type="primary"
          @click="sendMessage"
          :disabled="!newMessage"
      >发送</el-button>
      <el-button
          type="info"
          @click="showEmojiPicker = true"
      >表情</el-button>
      <el-button
          type="success"
          @click="chooseImage"
      >图片</el-button>
      <el-popover
          v-model="showEmojiPicker"
          placement="bottom"
          width="300px"
      >
        <el-row :gutter="10">
          <el-col
              v-for="(emojiGroup, groupIndex) in emojiData"
              :key="groupIndex"
              :span="8"
          >
            <el-row :gutter="5">
              <el-col
                  v-for="(emoji, emojiIndex) in emojiGroup"
                  :key="emojiIndex"
                  :span="4"
              >
                <el-button
                    @click="addEmojiToMessage(emoji)"
                    plain
                >{{ emoji }}</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <template #reference>
          <i class="el-icon-face-smile"></i>
        </template>
      </el-popover>
    </div>

    <!-- 图片预览模态框 -->
    <el-dialog
        v-model="showImagePreview"
        :src="previewImageUrl"
        :modal="false"
    ></el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import moment from'moment';
import TopNav from "@/components/TopNav/Back.vue"
// 聊天消息数组
const chatMessages = ref([
  {
    sender: 'doctor',
    time: moment().subtract(2, 'hours').format('HH:mm'),
    content: '您好，请问您今天感觉怎么样？',
    type: 'text'
  },
  {
    sender: 'patient',
    time: moment().subtract(1, 'hours').format('HH:mm'),
    content: '我感觉有点乏力，而且胃口不太好。',
    type: 'text'
  }
]);

// 新消息内容
const newMessage = ref('');

// 是否显示表情选择器
const showEmojiPicker = ref(false);

// 是否显示图片预览
const showImagePreview = ref(false);
// 图片预览 URL
const previewImageUrl = ref('');

// 表情数据（示例，可替换为完整的表情库）
const emojiData = ref([
  ['😀', '😃', '😄', '😁', '😆'],
  ['😅', '😂', '🤣', '😊', '😇']
]);

// 发送消息方法
const sendMessage = () => {
  if (newMessage.value) {
    // 这里可以添加将消息发送到服务器并广播给对方的逻辑
    const currentTime = moment().format('HH:mm');
    const sender = 'doctor'; // 假设当前是医生端，可根据实际情况修改
    chatMessages.value.push({
      sender,
      time: currentTime,
      content: newMessage.value,
      type: 'text'
    });
    newMessage.value = '';
  }
};

// 添加表情到消息输入框
const addEmojiToMessage = (emoji) => {
  newMessage.value += emoji;
};

// 选择图片
const chooseImage = () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.onchange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        // 这里可以添加将图片上传到服务器并广播图片消息的逻辑
        const currentTime = moment().format('HH:mm');
        const sender = 'doctor';
        chatMessages.value.push({
          sender,
          time: currentTime,
          content: event.target.result,
          type: 'image'
        });
      };
      reader.readAsDataURL(file);
    }
  };
  input.click();
};

// 预览图片
const previewImage = (url) => {
  previewImageUrl.value = url;
  showImagePreview.value = true;
};
</script>

<style scoped>
.real-time-communication-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-header {
  text-align: center;
  margin-bottom: 10px;
}
.header-title {
  color: #303133;
  font-size: 20px;
}
.chat-message-section {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}
.doctor-message {
  background-color: #5cb85c;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.patient-message {
  background-color: #007bff;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.sender {
  font-weight: bold;
}
.time {
  font-size: 12px;
}
.message-content {
  word-break: break-all;
}
.message-image {
  max-width: 100%;
  max-height: 200px;
  display: block;
  margin: 5px auto;
}
.message-input-section {
  display: flex;
  align-items: center;
}
</style>
